<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col align="center">
            <span style="font-size: 20px">订单详情</span>
          </el-col>
        </el-row>
        <el-row class="margin-to-20">
          <el-col align="center">
            <span>订单时间： {{orderDetail.createDate}}</span>
            <span>订单编号：{{orderDetail.code}}</span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row class="margin-to-20">
          <el-steps :active="serviceOrderStatusIndex" finish-status="success" align-center>
            <el-step title="待接单"></el-step>
            <el-step title="待服务"></el-step>
            <el-step title="服务中"></el-step>
            <el-step title="服务完成"></el-step>
          </el-steps>
        </el-row>
        <el-row class="margin-to-20">
          订货单信息：
          <table class="table-border" style="width: 100%;text-align: center;margin-top: 10px;">
            <tr bgcolor="#f1f4fc">
              <td colspan="2">车主</td><td colspan="2">服务商</td>
            </tr>
            <tr>
              <td>车主名称：</td><td>{{orderDetail.contact}}</td><td>汽修厂名称：</td><td>{{orderDetail.storeName}}</td>
            </tr>
            <tr>
              <td>联系电话：</td><td>{{orderDetail.contactTel}}</td><td>联系电话：</td><td>{{orderDetail.storeTel}}</td>
            </tr>
            <tr>
              <td>预约时间：</td><td>{{orderDetail.serviceDate}}</td><td>汽修厂地址：</td><td>{{orderDetail.store == null?'':orderDetail.store.province == null?'':orderDetail.store.province + orderDetail.store.city == null ?'':orderDetail.store.city + orderDetail.store.country ==null?'':orderDetail.store.country + orderDetail.store.address==null?'':orderDetail.store.address}}</td>
            </tr>
            <tr>
              <td>车牌号码：</td><td>{{orderDetail.car == null?'':orderDetail.car.code}}</td><td></td><td></td>
            </tr>
            <tr>
              <td>发动机号：</td><td>{{orderDetail.car == null?'':orderDetail.car.engineCode}}</td><td></td><td></td>
            </tr>
            <tr>
              <td>VIN码：</td><td>{{orderDetail.car == null?'':orderDetail.car.frameCode}}</td><td></td><td></td>
            </tr>
            <tr>
              <td>车型：</td><td>{{orderDetail.car == null?'':orderDetail.car.mode}}</td><td></td><td></td>
            </tr>
          </table>
        </el-row>
        <el-row class="margin-to-20">
          订货单信息：
          <el-table
            class="margin-to-10"
            :data="orderDetail.services"
            border
            style="width: 100%;">
            <el-table-column
              prop="code"
              align="center"
              width="200"
              label="项目编码">
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="项目名称">
            </el-table-column>
            <el-table-column
              prop="normalPrice"
              align="center"
              width="200"
              label="价格（¥）">
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="margin-to-20">
          操作记录：
          <el-table
            class="margin-to-10"
            :data="orderDetail.logs"
            border
            style="width: 100%;">
            <el-table-column 
              label="序号" 
              type="index" 
              width="50">
            </el-table-column>
            <el-table-column
              prop="createTime"
              align="center"
              width="200"
              label="操作时间">
            </el-table-column>
            <el-table-column
              prop="description"
              align="center"
              label="描述">
            </el-table-column>
            <el-table-column
              prop="orderStatus"
              align="center"
              width="200"
              label="状态">
            </el-table-column>
            <el-table-column
              prop="userRealname"
              align="center"
              width="200"
              label="操作人">
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="margin-to-20">
            <el-button type="primary" @click="goback">返回</el-button>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getDetails } from '@/api/order'
export default {
  name: 'orderList',
  data() {
    return {
      serviceOrderStatusIndex: 1,
      orderDetail: {
      }
    }
  },
  created() {
    let id = this.$route.params && this.$route.params.orderId
    this.getDetails(id)
  },
  methods: {
    // 详情获取  - 如果有详情接口 读详情
    async getDetails(id) {
      await getDetails(id)
        .then(res => {
          const { data } = res
          this.orderDetail = data
          if (this.orderDetail.orderStatus) {
            this.setServiceOrderStatusIndex(this.orderDetail.orderStatus)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    setServiceOrderStatusIndex(orderStatus) {
      switch (orderStatus) {
        case '1':
          this.serviceOrderStatusIndex = 1
          break
        case '2':
          this.serviceOrderStatusIndex = 2
          break
        case '3':
          this.serviceOrderStatusIndex = 3
          break
        case '4':
          this.serviceOrderStatusIndex = 4
          break
      }
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.margin-to-20{
  margin-top: 20px;
}
.margin-to-10{
  margin-top: 10px;
}
.table-border{
  border: solid 1px #ebeef5;
}
</style>
